<template>
  <view class="report-repair">
    <view style="padding: 18rpx 16rpx;">
      <view class="repair-map">
        <map style="width: 100%;height: 100%;" :latitude="data.latitude" :longitude="data.longitude"></map>
      </view>
      <view class="report-1">
        <view class="report-1-item">
          <view>车牌号码</view>
          <view style="margin-top: 32rpx;">
            <image 
              style="width: 40rpx;height: 40rpx;float: right;margin-left: 8rpx;" 
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/acclogo2.png"></image>
            <input v-model="data.plateNo" class="input-info" placeholder="请输入" />
          </view>
        </view>
        <view class="report-1-item border-t">
          <view>联系电话</view>
          <view style="margin-top: 32rpx;">
            <image 
              style="width: 40rpx;height: 40rpx;float: right;margin-left: 8rpx;" 
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/acclogo2.png"></image>
            <input v-model="data.phone" class="input-info" placeholder="请输入" />
          </view>
        </view>
        <view class="report-1-item border-t">
          <view>维修站点</view>
          <view style="margin-top: 32rpx;">
            <image 
              style="width: 40rpx;height: 45rpx;float: right;margin-left: 8rpx;" 
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/fragsubmitrepairlogo_5.png"></image>
            <input 
              @click="getSitemanage"
              class="input-info" 
              placeholder="请选择站点"
              :disabled="true"
              v-model="siteName"/>
            
          </view>
        </view>
      </view>
      <view class="report-2">
        <view @click="isMotor" class="report-2-item">
          <view>
            <image style="margin: 66rpx 0 0 90rpx;width: 50rpx;height: 50rpx;" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/fragsubmitrepairlogo_16.png"></image>
          </view>
          <view class="isMotor">
            <text 
              v-if="data.isMotorVehicle == 1"
              style="color: rgba(242, 138, 48, 1);">机动</text>
            <text 
              v-else
              style="color: rgba(153, 153, 153, 1);">机动</text>
            <text style="color: rgba(242, 138, 48, 1);">/</text>
            <text 
              v-if="data.isMotorVehicle == 0"
              style="color: rgba(242, 138, 48, 1);">非机动</text>
            <text 
              v-else
              style="color: rgba(153, 153, 153, 1);">非机动</text>
          </view>
        </view>
        <view class="report-2-item">
          <image 
            v-if="beforeImgs.length == 0"
            @click="addImg"
            style="width: 108rpx;height: 88rpx;margin: 68rpx 61rpx;" 
            src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/fragsubmitrepairlogo_2.png"></image>
          <view
            v-else
            class="img-box">
              <image
                v-for="(item,index) in beforeImgs"
                mode="aspectFill" 
                class="item-img"
                :key="index"
                :src="item"
                @click="showImg(item)"></image>
          </view>
          <view v-if="beforeImgs.length > 0">
            <image 
              @click="addImg"
              style="width: 230rpx;height: 71rpx;position: relative;top: -71rpx;" 
              src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/orderslogo16.png"></image>
          </view>
        </view>
        <view class="report-2-item">
          <image 
            v-if="recorder.path == ''"
            @click="recorderVoice"
            style="width: 36rpx;height: 52rpx;margin: 63rpx 0 0 97rpx;" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/fragsubmitrepairlogo_13.png"></image>
          
          <image 
            v-else
            @click="playVoice"
            style="width: 44rpx;height: 60rpx;margin: 53rpx 0 0 88rpx;" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/fragsubmitrepairlogo_8.png"></image>
          <view style="color: rgba(242, 138, 48, 1);text-align: center;font-weight: 600;font-size: 24rpx;">语音</view>
        </view>
      </view>
    </view>
    
    <view class="report-3">
      <view 
        v-if="img == ''"
        class="upload-img" 
        @click="chooseImg">
        <text>扫描车牌</text>
      </view>
      <view
        v-else
        class="report-3-show">
          <view>
            <image 
              mode="aspectFill" 
              style="width: 718rpx;height: 336rpx;" 
              :src="img"
              @click="showImg(img)"></image>
          </view>
          <view class="upload-img-2" @click="chooseImg">
            重新识别照片
          </view>
          <view class="submit-btn" @click="submitSave">
            报修提交
          </view>
      </view>
    </view>
    <uni-popup ref="pickSite">
      <view class="pick-site">
        <view class="input-box">
          <image 
            style="width: 34rpx;height: 32rpx;float: left;position: relative;top: 4rpx;margin-right: 20rpx;" 
            src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/fangdajing.png"></image>
          <input 
            @input="getSitemanage"
            v-model="search"
            style="height: 32rpx;width: 470rpx;line-height: 32rpx;" />
        </view>
        <view class="site-list">
          <view 
            v-for="(item,index) in sites"
            class="site-item"
            :key="index"
            @click="pickSite(item)">
            <text style="margin-left: 34rpx;">{{item.siteName}}</text>
            <image style="width: 32rpx;height: 30rpx;margin: 25rpx 42rpx 0 0;float: right;" src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/fragsubmitrepairlogo_15.png"></image>
            <text style="margin-right: 16rpx;float: right;">{{item.km}}</text>
          </view>
        </view>
      </view>
    </uni-popup>
    <!-- 录制语音 -->
    <uni-popup ref="getVoice" type="bottom" background-color="#fff">
      <view style="height: 500rpx;text-align: center;padding: 10rpx;">
        <view style="height: 60rpx;width: 100%;text-align: right;">
          <uni-icons @click="closePopup" color="#000000" type="closeempty" size="30"></uni-icons>
        </view>
        <view class="recorder-head">
          <text v-if="recorder.size == 1">按住说话</text>
          <text v-else>{{recorder.recorderTime}}</text>
        </view>
        <view style="margin-top: 100rpx;">
          <image 
             @touchstart="startRecorder" 
             @touchend="endRecorder" 
             @touchcancel="cancelRecorder"
            :style="{'transform': 'scale(' + recorder.size + ',' + recorder.size + ')'}" 
            class="recorder"
            src="https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/record.png"></image>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import {getSitemanage,saveSettlement} from '@/api/truck'
  import {uploadFile} from '@/api/uploadFile'
  //播放声音
  const audioPlay = uni.createInnerAudioContext();
  audioPlay.obeyMuteSwitch = false;
  
  //录制声音
  const recorderManager = uni.getRecorderManager();
  export default {
    data() {
      return{
        search:'',
        sites:[],
        siteName:'',
        img:'',
        beforeImgs:[],
        imgs:[''],
        data:{
          isMotorVehicle:1,
          phone:'',
          plateNo:'',
          latitude:39.909,
          longitude:116.39742,
          siteId:0,
          address:'',
          isDelete:0
        },
        recorder:{
          size:1,
          time:0,
          recorderTime:"00'00\"",
          count:null,
          path:"",
        },
      }
    },
    mounted() {
      // uni.showToast({
      //   image:'https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/fragsubmitrepairlogo_9.png'
      // })
      this.load();
    },
    methods:{
      load:function() {
        this.getLocation();
        this.uploadVoiceListen();
      },
      getLocation:function() {
        var that = this;
        uni.getLocation({
          type:'wgs84',
          success: (res) => {
            // console.log('当前位置的经度：' + res.longitude);
            // console.log('当前位置的纬度：' + res.latitude);
            that.data.latitude = res.latitude;
            that.data.longitude = res.longitude;
            console.log(res)
          }
        })
        that.data.phone = uni.getStorageSync('user').phone;
      },
      setLocation:function() {
        // uni.chooseAddress()
      },
      getSitemanage:function() {
        var that = this;
        getSitemanage({latitude:that.data.latitude,longitude:that.data.longitude,sName:that.search}).then(response => {
          var _data = response[1].data;
          // console.log(_data)
          if(_data.status == 200) {
            
            that.sites =_data.data;
            that.$refs.pickSite.open('center');
          }
        })
      },
      chooseImg:function() {
        var that = this;
        uni.chooseImage({
          count:1,
          sourceType:['camera'],
          success: (res) => {
            uploadFile(res.tempFilePaths[0],{type:3,duration:''}).then(response => {
              var _data = JSON.parse(response[1].data);
              // console.log(response[1].data);
              if(_data.status == 200) {
                uni.showToast({
                  title:'上传成功'
                })
                that.imgs[0] = (_data.data.model);
                that.img = _data.data.model;
                var plateNo = _data.data.ocr;
                if(plateNo.length > 10) {
                  plateNo = '';
                }
                that.data.plateNo = plateNo;
              }else {
                uni.showToast({
                  icon:'error',
                  title:'发生错误'
                })
              }
            }).catch(error => {
              uni.showToast({
                icon:'error',
                title:'发生错误'
              })
            })
          }
        })
      },
      isMotor:function() {
        this.data.isMotorVehicle = Math.abs(this.data.isMotorVehicle - 1);
      },
      pickSite:function(info) {
        this.data.siteId = info.id;
        this.data.address = info.address;
        this.siteName = info.siteName;
        this.$refs.pickSite.close();
      },
      showImg:function(url) {
        var imgs = this.imgs;
        uni.previewImage({
          current:url,
          urls:imgs
        })
      },
      submitSave:function() {
        uni.showLoading({
          title:'正在提交'
        });
        var imgs = this.imgs;
        var data = this.data;
        var imgList = [];
        var that = this;
        imgList.push({url:imgs[0],type:21});
        imgList.push({url:that.recorder.path,type:3,time:that.recorder.time});
        for(let i = 1;i < imgs.length;i ++) {
          var obj = {
            url:imgs[i],
            type:1
          }
          imgList.push(obj);
        }
        data.imgList = imgList;
        saveSettlement(data).then(response => {
          var _data = response[1].data;
          console.log(_data)
          if(_data.status == 200) {
            uni.hideLoading();
            if(_data.msg == '接车成功') {
              uni.showToast({
                title:'已提交'
              })
            }else {
              uni.showToast({
                icon:'error',
                title:_data.msg
              })
            }
            that.$emit('submitSuccess',0);
            
          }else {
            uni.showToast({
              icon:'error',
              title:'发生错误'
            })
          }
        })
      },
      addImg:function() {
        var that = this;
        uni.chooseImage({
          count:1,
          sourceType:['camera'],
          success: (res) => {
            uploadFile(res.tempFilePaths[0],{type:4,duration:''}).then(response => {
              var _data = JSON.parse(response[1].data);
              console.log(_data)
              if(_data.status == 200) {
                uni.showToast({
                  title:'上传成功'
                })
                that.beforeImgs.push(_data.data.model);
                that.imgs.push(_data.data.model);
              }else {
                uni.showToast({
                  icon:'error',
                  title:'发生错误'
                })
              }
            }).catch(error => {
              uni.showToast({
                icon:'error',
                title:'发生错误'
              })
            })
          }
        })
      },
      uploadVoiceListen:function() {
        var that = this;
        recorderManager.onStop(function (res) {
            // console.log('recorder stop' + JSON.stringify(res));
          var time = that.recorder.time;
          if(time < 1) {
            uni.showToast({
              title:'录制时间过短',
              icon:'error'
            })
          }else {
            // that.recorder.path = res.tempFilePath;
            // var part = that.data.parts[that.recorder.index];
            that.uploadVoice(res.tempFilePath,time)
            // audioPlay.src = res.tempFilePath;
            // audioPlay.play();
          }
          
        });
        recorderManager.onError(function(err) {
          uni.showToast({
            icon:'error',
            title:'无权限，录音失败'
          })
        })
      },
      uploadVoice:function(url,time) {
        var that = this;
        uploadFile(url,{type:1,duration:'' + time}).then(response => {
          var _data = JSON.parse(response[1].data);
          console.log(_data);
          if(_data.status == 200) {
            uni.showToast({
              title:'上传成功'
            })
            that.recorder.path = _data.data.model;
            audioPlay.src = _data.data.model;
            that.$refs.getVoice.close();
          }else {
            uni.showToast({
              icon:'error',
              title:'发生错误'
            })
          }
        }).catch(error => {
          uni.showToast({
            icon:'error',
            title:'发生错误'
          })
        })
      },
      startRecorder:function() {
        // recorderManager
        var that = this;
        this.recorder.size = 1.2;
        recorderManager.start();
        that.recorder.count = setInterval(function() {
          that.recorder.time ++;
          var mm = parseInt(that.recorder.time / 60);
          var ss = that.recorder.time % 60;
          if(mm < 10) {
            mm = '0' + mm;
          }
          if(ss < 10) {
            ss = '0' + ss;
          }
          that.recorder.recorderTime = mm + "'" + ss + "\"";
        },1000);
      },
      endRecorder:function() {
        this.recorder.size = 1;
        clearInterval(this.recorder.count);
        recorderManager.stop();
      },
      cancelRecorder:function() {
        that.recorder.recorderTime = "00'00\"";
        that.recorder.time = 0;
        uni.showToast({
          icon:'error',
          title:'发生错误'
        })
      },
      recorderVoice:function() {
        var that = this;
        uni.authorize({
            scope: 'scope.record',
            success() {
              that.$refs.getVoice.open('bottom');
            },
            fail() {
              uni.showToast({
                icon:'error',
                title:'授权失败'
              })
            }
        })
      },
      closePopup:function() {
        this.$refs.getVoice.close();
      },
      playVoice:function() {
        audioPlay.play();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .report-repair {
    font-family: PingFangSC-Medium, PingFang SC;
    height: 100%;
    .repair-map {
      height: 360rpx;
      border-radius: 16rpx;
      box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
      overflow: hidden;
    }
    .report-1 {
      border-radius: 16rpx;
      box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
      line-height: 104rpx;
      color: rgba(51, 51, 51, 1);
      font-size: 28rpx;
      padding: 0 24rpx;
      margin-top: 12rpx;
      .border-t {
        border-top: 2rpx solid rgba(220, 220, 220, 0.5);
      }
      .report-1-item {
        display: flex;
        justify-content: space-between;
        // margin-top: 30rpx;
        .input-info {
          // float: right;
          height: 40rpx;
          line-height: 40rpx;
          font-size: 28rpx;
          text-align: right;
        }
      }
    }
    .report-2 {
      margin-top: 12rpx;
      display: flex;;
      justify-content: space-between;
      .report-2-item {
        width: 230rpx;
        height: 220rpx;
        box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
        border-radius: 16rpx;
        .isMotor {
          font-size: 24rpx;
          padding-top: 3rpx;
          line-height: 34rpx;
          text-align: center;
          font-weight: 600;
        }
        .img-box {
          margin: 10rpx 15rpx;
          height: 200rpx;
          width: 200rpx;
          overflow: hidden;
          .item-img {
            width: 80rpx;
            height: 80rpx;
            margin: 10rpx;
            border-radius: 8rpx;
          }
        }
      }
    }
    .report-3 {
      padding: 0 6rpx;
      .upload-img {
        width: 738rpx;
        height: 120rpx;
        background-image: url('https://qiantu4.oss-cn-hangzhou.aliyuncs.com/wxpic/fragsubmitrepairlogo_17.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        text-align: center;
        letter-spacing: 5rpx;
        color: rgba(250, 140, 22, 1);
        padding-top: 236rpx;
        font-weight: 600;
      }
      .report-3-show {
        width: 718rpx;
        height: 336rpx;
        border-radius: 16rpx;
        margin-left: 10rpx;
        margin-top: 16rpx;
        overflow: hidden;
        .upload-img-2 {
          background-color: rgba(0, 0, 0, 0.6);
          line-height: 70rpx;
          text-align: center;
          color: white;
          font-size: 24rpx;
          position: relative;
          top: -75rpx;
        }
        .submit-btn {
          background-color: rgba(0, 0, 0, 0.5);
          border: 2rpx solid rgba(250, 140, 22, 1);
          border-radius: 16rpx;
          line-height: 100rpx;
          width: 200rpx;
          color: rgba(252, 140, 22, 1);
          text-align: center;
          position: relative;
          top: -300rpx;
          left: 250rpx;
        }
      }
    }
    .pick-site {
      border-radius: 16rpx;
      background-color: white;
      padding: 28rpx 40rpx;
      width: 580rpx;
      color: rgba(51, 51, 51, 1);
      font-size: 28rpx;
      .input-box {
        border: 2rpx solid rgba(242, 138, 48, 1);
        border-radius: 16rpx;
        padding: 24rpx 22rpx;
        line-height: 32rpx;
        
      }
      
      .site-list {
        line-height: 84rpx;
        height: 330rpx;
        overflow-y: auto;
        .site-item {
          margin-top: 10rpx;
          border-bottom: 2rpx solid rgba(238, 238, 238, 1);
          white-space: nowrap;
        }
      }
    }
    .recorder-head {
      font-size: 52rpx;
      display: block;
    }
    .recorder {
      width: 210rpx;
      height: 210rpx;
      transition: all 0.5s linear;
    }
  }
</style>
